<template>
    <!--首页内容-->
    <div style="background-color: #fafafa;padding: 20px 0;">

        <!--首页下部logo-->
        <div class="img-wrap">
            <img src="/index/xiaomi.jpg">
        </div>
        <div class="content-wrap">
            <!--分类区-->
            <IndexCategory page="/phone" :data="phone"></IndexCategory>
            <IndexCategory page="/computer" :data="computer"></IndexCategory>
            <IndexCategory page="/intelligent" :data="intelligent"></IndexCategory>
            <IndexCategory page="/accessory" :data="accessory"></IndexCategory>
        </div>
    </div>
</template>

<script>
    import IndexCategory from '@components/index/content/IndexCategory'
    import { getIndexProductInfo } from "@/api/index";

    export default {
        name: "Content",
        components:{IndexCategory},
        data(){
            return {
                phone:{},
                computer:{},
                intelligent:{},
                accessory:{},
            }
        },
        methods:{
            init(){
                getIndexProductInfo().then(response => {
                    console.log(response)
                    if (response.state === true) {
                        this.phone = response.data.phone;
                        this.computer = response.data.computer;
                        this.intelligent = response.data.intelligent;
                        this.accessory = response.data.accessory;
                        //this.$notify.success({title: '成功',message: response.message, duration: 1500});
                    }else{
                        this.$notify.warning({title: '失败',message: response.message, duration: 1500});
                    }
                })
            },
        },
        beforeMount(){
            this.init()
        },
    }
</script>

<style scoped>
    .img-wrap{
        margin: 0 auto;
        width: 70vw;
    }
    .img-wrap img{
        width: 100%;
        height: 100%;
    }

    .content-wrap{
        /*background-color: whitesmoke;*/
        width: 70vw;
        height: fit-content;
        margin: 0 auto;
    }

    /*card*/
    .today-item{
        margin: 10px 0;
    }
    .box-card{
        height: 330px;
    }
    .text {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
    }
    /*左侧购物车*/
    .shopping-cart{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
    }

</style>
